<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>博客类型列表</title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<el-container>
				<el-header>
					<div th:include="~{common/nav-manager::manager}"></div>
				</el-header>
				<el-container>
					<el-main style="margin-top: 5vw;">
						<el-button style="margin-left: 72vw;" type="primary" icon="el-icon-circle-plus-outline" @click="show = true,type.name='',tips='添加',isUpdate=false">添加</el-button>
						<el-table :data="typeArr">
							<el-table-column label="名称" prop="name"></el-table-column>
							<el-table-column label="操作" min-width="100px">
								<template slot-scope="scope">
									&nbsp;&nbsp;<el-button icon="el-icon-edit-outline" @click="change(scope.row)"></el-button>
									<el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-main>
					<el-dialog :title="tips" :visible.sync="show">
						<el-form :model="type" ref="type">
							<el-form-item label="name" prop="name">
								<el-input v-model="type.name"></el-input>
							</el-form-item>
						</el-form>
					  <span slot="footer">
					      <el-button @click="show = false">取 消</el-button>
						  <el-button type="primary" v-if="isUpdate" @click="update()">确 定</el-button>
						  <el-button type="primary" v-else @click="add()">提 交</el-button>
					  </span>
					</el-dialog>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				tips:"添加",
				show:false,
				isUpdate:false,
				typeArr:[],
				type:{
					name:""
				}
			},
			methods: {
				add(){
					this.isUpdate = false
					this.show = false
					this.tips = "添加"
					let _this = this
					axios.post("/api/adm/blogType/add",this.type)
					.then(function(response){
						if(response.data.code == 200){
							_this.typeArr = response.data.data
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
						}
					})
				},
				change(type){
					this.show = true
					this.isUpdate = true
					this.tips = "修改"
					this.type = type
				},
				update(){
					let _this = this
					this.show = false
					console.log(this.type)
					axios.post("/api/adm/blogType/update",this.type)
					.then(function(response){
						if(response.data.code == 200){
							_this.typeArr = response.data.data
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
						}
					})
				},
				del(typeId){
					let _this = this
					axios.get("/api/adm/blogType/deleteById/"+typeId)
					.then(function(response){
						if(response.data.code == 200){
							_this.typeArr = response.data.data
							_this.$message({
								message: response.data.msg,
								showClose: 'true',
								type: 'success'
							})
						}
					})
				}
			},
			mounted() {
				let _this = this
				axios.get("/api/public/blogType/findAll")
				.then(function(response){
					_this.typeArr = response.data.data
				})
			}
		})
	</script>
</html>
